<template>
	<view class="mainbgc" @click="hidefalse">
		<header-top :messageInfo="{typeFlag:true,message:'推单汇总',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="nostrongtext" @click="show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding2">
			<u-tabs :list="list1" @click="tabclick" :activeStyle="{ color: '#0BBDCB' }" lineColor="#0BBDCB"></u-tabs>
			<!-- 待下单-->
			<view class="flexcenter" v-if="tabscurrent==1 && !listdxd.data.length">
				<view class="placeholderimage"></view>
			</view>
			<template v-if="tabscurrent==1 && listdxd.data.length">
				
				<view class="margin_top ffffff radius mainpadding flexbetween" v-for="item in listdxd.data"
					:key="item.id" @click="jumpdetail(item.id,2)">
					<view>
						<view class="strongtext">{{item.customer_name}}</view>
						<view class="smalltext margin_top">
							<text>订单金额</text>
							<text class="jinse">￥{{item.real_money}}</text>
						</view>
					</view>
					<view class="flexright">
						<view class="orders" @click.stop="helporder(item.id)">帮他下单</view>
						<view class="orders" @click.stop="cancelorder(item.id)">取消下单</view>
						<view class="phoneicon" @click.stop="phone(item.customer_mobile)"></view>
					</view>
				</view>
			</template>
			<!--  已下单  -->
			<view class="flexcenter" v-if="tabscurrent==2 && !listyxd.data.length">
				<view class="placeholderimage"></view>
			</view>
			<template v-if="tabscurrent==2 && listyxd.data.length">
				<view class="margin_top ffffff radius mainpadding flexbetween" v-for="item in listyxd.data"
					:key="item.id"  @click="jumpdetail(item.id,3)">
					<view>
						<view class="strongtext">{{item.customer_name}}</view>
						<view class="smalltext margin_top">
							<text>订单金额</text>
							<text class="jinse">￥{{item.real_money}}</text>
						</view>
					</view>
					<view class="flexright">
						<view class="phoneicon" @click.stop="phone(item.customer_mobile)"></view>
					</view>
				</view>
			</template>

		</view>
		<!-- 未推送 -->
		<view class="flexcenter" v-if="tabscurrent==0 && !listwts.data.length">
			<view class="placeholderimage"></view>
		</view>
		<view class="wtdpadding" v-if="tabscurrent==0 && listwts.data.length">
			<view class="mainpadding ffffff flexbetween">
				<view class="flex1 titletext">客户</view>
				<view class="flex2 titletext flexcenter"></view>
				<view class="flex3 titletext flexcenter">订单金额</view>
				<view class="flex2 titletext flexright">电话</view>
			</view>
			<view class="lrpadding ffffff margin_top">
				<view class="itemdata flexbetween" v-for="item in listwts.data" :key="item.id"  @click="jumpdetail(item.id,1)">
					<view class="flex1 flexleft">
						<!-- 选中 -->
						<view class="selecticon margin_right" style="flex: 1;" v-if="item.is_check"
							@click.stop="changeitem(1,item)">
							<image src="@/static/image/system/dui.png" mode=""></image>
						</view>
						<!-- 未选中 -->
						<view class="noselecticon margin_right" v-if="!item.is_check" @click.stop="changeitem(2,item)">
						</view>
						<view class="nostrongtext" style="flex: 10;">{{item.customer_name}}</view>
					</view>
					<view class="flex2 flexcenter"></view>
					<view class="flex3 flexcenter">
						<view class="smalltext jinse">{{item.real_money}}</view>
					</view>
					<view class="flex2 flexright">
						<view class="bluephone" @click.stop="phone(item.customer_mobile)"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="flexbetween ffffff bottombox" style="z-index: 0;" v-if="tabscurrent==0">
			<view class="leftradio margin_right flexleft">
				<!-- 选中 -->
				<view class="selecticon" v-if="selectall" @click="changeall(1)">
					<image src="@/static/image/system/dui.png" mode=""></image>
				</view>
				<!-- 未选中 -->
				<view class="noselecticon" v-if="!selectall" @click="changeall(2)"></view>
				<view class="quanxuan">全选<text
						class="littletxt">已选{{selecetarr.length}}家,共{{listwts.data.length}}家</text>
				</view>
			</view>
			<view class="rt flexleft">
				<view class="shangjiaobtn" @click="tuisong">推送</view>
			</view>
		</view>
		<u-popup round="20" :show="show" @close="show = false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="starttime">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="endtime">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="strongtext margin_top">单据来源</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in seletdata" :key="item.id"
						@click="cleardata(item.id)">
						<view :class="item.id==gouxuanid? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="surepop">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 开始时间选择器 -->
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows = false">
		</u-datetime-picker>
		<!-- 结束时间选择器 -->
		<u-datetime-picker :show="showss" v-model="value2" mode="date" :minDate="mindates" @confirm="confirms"
			@cancel="showss = false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					}
				],
				show: false,
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mindates: "",
				currents: -1,
				list1: [{
					name: '未推送',
				}, {
					name: '待下单',
				}, {
					name: '已下单',
				}, ],
				tabscurrent: 0,

				// 下拉菜单
				selectshow: false,
				seletdata: [{
						id: 1,
						name: "推荐"
					},
					{
						id: 2,
						name: "促销"
					},
					{
						id: 3,
						name: "新品"
					},
				],
				limit: 12,
				// 未推送
				pagewts: 1,
				listwts: {
					data: []
				},
				selecetarr: [],
				selectall: false,
				//待下单
				pagedxd: 1,
				listdxd: {
					data: []
				},
				//已下单
				pageyxd: 1,
				listyxd: {
					data: []
				},
				gouxuanid: 1, //1=推荐,2=促销,3=新品
				customers_id: []
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			console.log(data,"数据绑定内容")
			// this.customers_id = data
			this.customers_id = [7,8,12,9,4,3]
		},
		onShow() {
			this.getwts() //未推送
		},
		watch: {
			selecetarr(newval) {
				if (newval.length == this.listwts.data.length) {
					this.selectall = true
				} else {
					this.selectall = false
				}
			}
		},
		methods: {
			getwts(isPage, page) {
				let _this = this;
				httpRequest.request('appapi/manage/customer/push', 'GET', {
					page: page || 1,
					limit: _this.limit,
					purchase_type: this.gouxuanid,
					status: this.tabscurrent,
					startdate: this.start == '开始时间' ? '' : this.start,
					enddate: this.end == '结束时间' ? '' : this.end,
					customers_id: this.customers_id.join()
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						resList.forEach(item => {
							this.$set(item, "is_check", false)
						})
						if (isPage == true) {
							_this.listwts.data = _this.listwts.data.concat(resList);
						} else {
							_this.listwts = res.data
							_this.listwts.data = resList;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getdxd(isPage, page) {
				let _this = this;
				httpRequest.request('appapi/manage/customer/push', 'GET', {
					page: page || 1,
					limit: _this.limit,
					purchase_type: this.gouxuanid,
					status: this.tabscurrent,
					startdate: this.start == '开始时间' ? '' : this.start,
					enddate: this.end == '结束时间' ? '' : this.end,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						if (isPage == true) {
							_this.listdxd.data = _this.listdxd.data.concat(resList);
							// _this.listtj.data.push(...resList);
						} else {
							_this.listdxd = res.data
							_this.listdxd.data = resList;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getyxd(isPage, page) {
				let _this = this;
				httpRequest.request('appapi/manage/customer/push', 'GET', {
					page: page || 1,
					limit: _this.limit,
					purchase_type: this.gouxuanid,
					status: this.tabscurrent,
					startdate: this.start == '开始时间' ? '' : this.start,
					enddate: this.end == '结束时间' ? '' : this.end,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						if (isPage == true) {
							_this.listyxd.data = _this.listyxd.data.concat(resList);
							// _this.listtj.data.push(...resList);
						} else {
							_this.listyxd = res.data
							_this.listyxd.data = resList;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				if (this.tabscurrent == 0) {
					let listtj = _this.listwts;
					let page = _this.pagewts;
					if (listtj.last_page <= page) {
						return false;
					}
					page++;
					_this.pagewts = page;
					_this.getwts(true, page);
				} else if (this.tabscurrent == 1) {
					let listtj = _this.listdxd;
					let page = _this.pagedxd;
					if (listtj.last_page <= page) {
						return false;
					}
					page++;
					_this.pagedxd = page;
					_this.getdxd(true, page);
				} else if (this.tabscurrent == 2) {
					let listtj = _this.listyxd;
					let page = _this.pageyxd;
					if (listtj.last_page <= page) {
						return false;
					}
					page++;
					_this.pageyxd = page;
					_this.getyxd(true, page);
				}

			},
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '结束时间';
				this.mindates = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			starttime(e) {
				this.shows = true;
			},
			endtime() {
				this.showss = true;
			},
			// select点击
			cleardata(id) {
				this.gouxuanid = id
				this.selectshow = false
			},

			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
			// tabs切换
			tabclick(item) {
				console.log('item', item);
				this.tabscurrent = item.index
				if (this.tabscurrent == 0) {
					this.getwts()
				} else if (this.tabscurrent == 1) {
					this.getdxd()
				} else if (this.tabscurrent == 2) {
					this.getyxd()
				}
			},
			changeitem(value, item) {
				if (value == 1) {
					item.is_check = false
					let index = this.selecetarr.indexOf(item.id)
					this.selecetarr.splice(index, 1)
				} else {
					item.is_check = true
					this.selecetarr.push(item.id)
				}
			},
			changeall(value) {
				if (value == 1) {
					this.selectall = false
					this.selecetarr = []
					this.listwts.data.forEach(item => {
						item.is_check = false
					})
				} else {
					this.selecetarr = []
					this.selectall = true
					this.listwts.data.forEach(item => {
						item.is_check = true
						this.selecetarr.push(item.id)
					})
				}
			},
			// 推送
			tuisong() {
				httpRequest.request('appapi/manage/customer/push_push', 'POST', {
					id: this.selecetarr.join()
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg)
						this.getwts()
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 代下单
			// 帮他下单
			helporder(id) {
				httpRequest.request('appapi/manage/customer/push_order', 'POST', {
					id: id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast("下单成功")
						this.getdxd()
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 取消推单
			cancelorder(id) {
				httpRequest.request('appapi/manage/customer/push_cancel', 'POST', {
					id: id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast("取消成功")
						this.getdxd()
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			resetbtn() {
				this.start = "开始时间"
				this.end = "结束时间"
				this.currents = -1
				this.gouxuanid = 1
				this.show = false
				if (this.tabscurrent == 0) {
					this.getwts()
				} else if (this.tabscurrent == 1) {
					this.getdxd()
				} else if (this.tabscurrent == 2) {
					this.getyxd()
				}
			},
			surepop() {
				if (this.tabscurrent == 0) {
					this.getwts()
				} else if (this.tabscurrent == 1) {
					this.getdxd()
				} else if (this.tabscurrent == 2) {
					this.getyxd()
				}
				this.show = false
			},

			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			jumpdetail(id,type){
				let data = {
					id:id,
					type:type,//1未推送，2待下单，3已下单
				}
				uni.navigateTo({
					url:"/pages/workbench/xiaoshou/xiaoshoudan?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
			
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.gouxuan {
		width: 28rpx;
		height: 18rpx;
		background-image: url("@/static/image/system/gouxuan.png");
		background-size: 100% 100%;
	}

	.itemselect {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, .1);
	}

	// tab切换
	.selectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
		background-color: #e1f4f5;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.noselectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 33rpx;
		background-color: #eff0f0;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	.smalltext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.jinse {
		color: #F3AD3D;
		word-break: break-all;
	}

	.orders {
		padding: 6rpx 20rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		border: 1rpx solid #0BBDCB;
		border-radius: 50rpx;
		margin-right: 15rpx;
	}

	.flex1 {
		flex: 4;
	}

	.flex2 {
		flex: 1;
	}

	.flex3 {
		flex: 2;
	}

	.lrpadding {
		padding: 0 30rpx ;
	}
	.wtdpadding{
		padding-bottom: 180rpx;
	}

	.itemdata {
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.05);
	}

	.bottombox {
		padding: 38rpx 30rpx 80rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}

	.quanxuan {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 14rpx;
		font-weight: bold;
	}

	.daijiaoje {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.shangjiaobtn {
		width: 198rpx;
		height: 62rpx;
		margin-left: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #00B855;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.littletxt {
		font-size: 26rpx;
		color: #666666;
		margin-left: 30rpx;
		font-weight: 400;
	}

	.sousuo {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}


	.dizhi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
	}

	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}
</style>
